/* 
* jQuery Flight Indicators plugin
* By Sébastien Matton (seb_matton@hotmail.com)
* Published under GPLv3 License.
* 
* https://github.com/sebmatton/jQuery-Flight-Indicators
*/


(function($) {
	function FlightIndicator( placeholder, type, options ) {
		console.log( placeholder)
		// Initial configuration
		var uav_roll_pitch = this;
		var settings = $.extend({
			size : 100,
			uav_roll : 0,
			uav_pitch : 0,
			uav_heading: 0,
			camera_roll : 0,
			camera_pitch : 0,
			camera_heading: 0,
			camera_field: 0,
			cesium_north:0,
			img_directory : '仪表盘/img/'
		}, options );

		var constants = {
			pitch_bound:30,
		}

		// Creation of the instrument
		placeholder.each(function(){
			switch(type){
				case 'cesium_north_pointer':
					$(this).html(
						'<div class="instrument cesium_north_pointer"><img src="' + settings.img_directory + 'north_pointer.png" class="north_pointer_img" alt="" /></div>');
					_setNorthDirection(settings.cesium_north);	
				break;				
				case 'uav_heading':
					$(this).html(
						'<div class="instrument uav_heading"><div class="uav_heading box"><img src="' + settings.img_directory + 'heading_back.svg" class="box" alt="" /></div><div class="uav_mechanics box"><img src="' + settings.img_directory + 'heading_uav.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
					_setUavHeading(settings.uav_heading);
				break;
				case 'uav_roll_pitch':
					$(this).html('<div class="instrument uav_attitude"><div class="uav_roll box"><img src="' + settings.img_directory + 'roll_pitch_back_uav.svg" class="box" alt="" /><div class="uav_pitch box"><img src="' + settings.img_directory + 'roll_pitch_ball_uav.svg" class="box" alt="" /></div><img src="' + settings.img_directory + 'roll_pitch_circle_uav.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'roll_pitch_uav.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
					_setUavRollPitch(settings.uav_roll,settings.uav_pitch);
				break;
				case 'camera_heading_field':
					$(this).html(
						'<div class="instrument camera_heading">'+
						'<div class="camera_heading box"><img src="' + settings.img_directory + 'heading_back.svg" class="box" alt="" /></div><div class="camera_mechanics box"><img src="' + settings.img_directory + 'heading_camera.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div>'+
						'<div class="box"><canvas id="canvas_field" class="field"></canvas></div>'+						
						'</div>');
					_setCameraHeadingField(settings.camera_heading, settings.camera_field, settings.size);
				break;
				case 'camera_roll_pitch':
					$(this).html('<div class="instrument camera_attitude"><div class="camera_roll box"><img src="' + settings.img_directory + 'roll_pitch_back_camera.svg" class="box" alt="" /><div class="camera_pitch box"><img src="' + settings.img_directory + 'roll_pitch_ball_camera.svg" class="box" alt="" /></div><img src="' + settings.img_directory + 'roll_pitch_circle_camera.svg" class="box" alt="" /></div><div class="mechanics box"><img src="' + settings.img_directory + 'roll_pitch_camera.svg" class="box" alt="" /><img src="' + settings.img_directory + 'fi_circle.svg" class="box" alt="" /></div></div>');
					_setCameraRollPitch(settings.camera_roll,settings.camera_pitch);
				break;
			}
			$(this).find('div.instrument').css({height : settings.size, width : settings.size});
		});

		// Private methods
		function _setUavRollPitch(roll,pitch){
			placeholder.each(function(){
				$(this).find('div.instrument.uav_attitude div.uav_roll').css('transform', 'rotate('+roll+'deg)');
			});
			if(pitch>constants.pitch_bound){pitch = constants.pitch_bound;}
			else if(pitch<-constants.pitch_bound){pitch = -constants.pitch_bound;}
			placeholder.each(function(){
				$(this).find('div.instrument.uav_attitude div.uav_roll div.uav_pitch').css('top', pitch*0.7 + '%');
			});
		}

		function _setUavHeading(heading){
			placeholder.each(function(){
				$(this).find('div.instrument.uav_heading div.uav_mechanics').css('transform', 'rotate(' + heading + 'deg)');
			});	
		}

		function _setCameraRollPitch(roll,pitch){
			placeholder.each(function(){
				$(this).find('div.instrument.camera_attitude div.camera_roll').css('transform', 'rotate('+roll+'deg)');
			});
			if(pitch>constants.pitch_bound){pitch = constants.pitch_bound;}
			else if(pitch<-constants.pitch_bound){pitch = -constants.pitch_bound;}
			placeholder.each(function(){
				$(this).find('div.instrument.camera_attitude div.camera_roll div.camera_pitch').css('top', pitch*0.7 + '%');
			});
		}

		function _setCameraHeadingField(heading, field,size){
			if (size==undefined) return;
			placeholder.each(function(){
				$(this).find('div.instrument.camera_heading div.camera_mechanics').css('transform', 'rotate(' + heading + 'deg)');
			});	
			try{

			var canvas = document.getElementById("canvas_field");
        	var  ctx=canvas.getContext('2d');
        	canvas.width = size;
        	canvas.height = size;

			/*把起点放到圆心位置*/
			ctx.moveTo(size/2,size/2);
			var from_r=(heading-field/2-90)*Math.PI/180;
			var to_r=(heading+field/2-90)*Math.PI/180;		
			ctx.arc(size/2,size/2,size/4.5,from_r,to_r,false);
			ctx.closePath();

			var c_r=heading*Math.PI/180;
			var t_x=Math.sin(c_r)*size/4.5+size/2;
			var t_y=size/2-Math.cos(c_r)*size/4.5;
			let gradient = ctx.createLinearGradient(size/2, size/2, t_x, t_y);
			gradient.addColorStop(0, "#ff0000");
			gradient.addColorStop(1, "#232323");
			ctx.fillStyle=gradient;	
			ctx.fill();
			//ctx.strokeStyle="#000";
			//ctx.stroke();
		}catch(e){
			console.log(e.message);
		}

		}

		function _resize(size){
			placeholder.each(function(){
				$(this).find('div.instrument').css({height : size, width : size});
			});
		}

		function _setNorthDirection(cesium_north){
			placeholder.each(function(){
				$(this).find('div.instrument.cesium_north_pointer').css('transform', 'rotate(' + cesium_north + 'deg)');
			});	
		}
		// function _setNorthDirection(cesium_north, size){
		// 	var canvas = document.getElementById("canvas_north_pointer");
		// 	var ctx=canvas.getContext('2d');
		// 	canvas.width = size;
        // 	canvas.height = size;


		// 	ctx.translate(size/2,size/2);
		// 	ctx.rotate(cesium_north*Math.PI/180);
		// 	ctx.beginPath();
		// 	ctx.moveTo(-size/3, 0);
  		// 	ctx.lineTo(size/3, 0);
		// 	ctx.strokeStyle="#000";
		// 	ctx.stroke();
		// 	ctx.beginPath();
		// 	ctx.moveTo(0, -size/3);
  		// 	ctx.lineTo(0,size/3);
		// 	ctx.strokeStyle="#000";
		// 	ctx.stroke();
		// 	ctx.font = "48px serif";
		// 	ctx.fillStyle="#F00";
  		// 	ctx.fillText("N", 0, -size/2.5);
		// }

		// Public methods
		this.setUavRollPitch = function(roll,pitch){_setUavRollPitch(roll,pitch);}
		this.setUavHeading = function(heading){_setUavHeading(heading);}
		this.setCameraRollPitch = function(roll,pitch){_setCameraRollPitch(roll,pitch);}
		this.setCameraHeadingField = function(heading, field, size){_setCameraHeadingField(heading, field, 	size);}
		this.setNorthDirection = function(cesium_north){_setNorthDirection(cesium_north);}
		this.resize = function(size){_resize(size);}
		return uav_roll_pitch;
	};

	// Extension to jQuery
	$.flightIndicator = function(placeholder, type, options){
		var flightIndicator = new FlightIndicator($(placeholder), type, options)
		return flightIndicator;
	}

	$.fn.flightIndicator = function(data, type, options){
		return this.each(function(){
			$.flightIndicator(this, type, options);
		});
	}
}( jQuery ));
